$animationTime: 300ms;

.dismissButton {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 100%;
  height: 40px;

  &:global(-entering) {
    animation: enter $animationTime forwards;
  }

  &:global(-exiting) {
    animation: exit $animationTime forwards;
  }

  &:global(-exited) {
    display: none;
  }
}

@keyframes exit {
  0% {
    transform: translate(0%, 0) scale(1);
    opacity: 1;
  }

  99% {
    transform: translate(200%, 0) scale(0.1);
    opacity: 0;
  }
  100% {
    visibility: hidden;
  }
}

@keyframes enter {
  0% {
    transform: translate(200%, 0) scale(0.1);
    opacity: 0;
  }

  99% {
    transform: translate(0%, 0) scale(1);
    opacity: 1;
  }
}

:export {
  animationTime: $animationTime / 1ms;
}
